<template>
    <div>
        <div id="myfooter">
            <div class="footer">
                <ul class="d-flex list-unstyled justify-content-around">
                    <li>
                        <img src="http://127.0.0.1:3000/footer1.png" alt=""/>
                        <p class="text-white mt-1 text-center">全国免费配送</p>
                    </li>
                    <li>
                        <img src="http://127.0.0.1:3000/footer2_03.png" alt=""/>
                        <p class="text-white mt-1 text-center">线上付款</p>
                    </li>
                    <li>
                        <img src="http://127.0.0.1:3000/footer3_07.png" alt=""/>
                        <p class="text-white mt-1 text-center">钻石以小换大</p>
                    </li>
                    <li>
                        <img src="http://127.0.0.1:3000/footer4_09.png" alt=""/>
                        <p class="text-white mt-1 text-center">一钻两证</p>
                    </li>
                    <li>
                        <img src="http://127.0.0.1:3000/footer5_11.png" alt=""/>
                        <p class="text-white mt-1 text-center">15天退换</p>
                    </li>
                    <li>
                        <img src="http://127.0.0.1:3000/footer6_13.png" alt=""/>
                        <p class="text-white mt-1 text-center">终身保养</p>
                    </li>
                </ul>
            </div>
            <footer class="bg-white footer1">
                <div class="row my-4 footer1_1">
                    <div class="col-6">
                        <div class="row m-0">
                            <div class="col-2 p-0">
                                <h5>关于我们</h5>
                                <ul class="list-unstyled">
                                    <li><a class="text-muted" href="javascript:;">加入我们</a></li>
                                    <li><a class="text-muted" href="javascript:;">诚聘贤才</a></li>
                                    <li><a class="text-muted" href="javascript:;">市场合作</a></li>
                                </ul>
                            </div>
                            <div class="col-2 p-0">
                                <h5>购物指南</h5>
                                <ul class="list-unstyled">
                                    <li><a class="text-muted" href="javascript:;">注册流程</a></li>
                                    <li><a class="text-muted" href="javascript:;">测量手寸</a></li>
                                    <li><a class="text-muted" href="javascript:;">网站地图</a></li>
                                </ul>
                            </div>
                            <div class="col-2 p-0">
                                <h5>付款方式</h5>
                                <ul class="list-unstyled">
                                    <li><a class="text-muted" href="javascript:;">如何付款</a></li>
                                    <li><a class="text-muted" href="javascript:;">支付方式</a></li>
                                </ul>
                            </div>
                            <div class="col-2 p-0">
                                <h5>配送方式</h5>
                                <ul class="list-unstyled">
                                    <li><a class="text-muted" href="javascript:;">配送流程</a></li>
                                </ul>
                            </div>
                            <div class="col-2 p-0">
                                <h5>售后服务</h5>
                                <ul class="list-unstyled">
                                    <li><a class="text-muted" href="javascript:;">全程保险</a></li>
                                    <li><a class="text-muted" href="javascript:;">一钻双证</a></li>
                                    <li><a class="text-muted" href="javascript:;">终身保养</a></li>
                                </ul>
                            </div>
                            <div class="col-2 p-0">
                                <h5>法律声明</h5>
                                <ul class="list-unstyled">
                                    <li><a class="text-muted" href="javascript:;">隐私声明</a></li>
                                    <li><a class="text-muted" href="javascript:;">注册协议</a></li>
                                </ul>
                            </div>
                        </div>
                        </div>
                    <div class="col-3">
                        <img class="mt-3" src="http://127.0.0.1:3000/footer7_03.jpg" alt="联系方式"/>
                        <p class="text-center text-muted mt-2">服务时间9:30-18:00</p>
                    </div>
                    <div class="col-3">
                        <div class="row">
                            <div class="col-6 p-0">
                                <img src="http://127.0.0.1:3000/weixin_03.png" alt="微信"/>
                                <p class="w-75 text-center text-warning font-weight-bold">微信</p>
                            </div>
                            <div class="col-6 p-0">
                                <img src="http://127.0.0.1:3000/weibo_05.png" alt="微博"/>
                                <p class="w-75 text-center text-muted">微博</p>
                            </div>
                        </div>
                    </div>
                </div>
            </footer>
            <div id="footer2" class="footer2">
                <ul class="breadcrumb px-2">
                    <li class="breadcrumb-item">
                        <a class="text-muted" href="javascript:;">IDLOVES同志专属珠宝官网</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a class="text-muted" href="javascript:;">同性情侣对戒</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a class="text-muted" href="javascript:;">IDLOVES品牌文化</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a class="text-muted" href="javascript:;">同志珠宝</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a class="text-muted" href="javascript:;">爱与荣耀珠宝</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a class="text-muted" href="javascript:;">同性婚姻</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a class="text-muted" href="javascript:;">IDLOVES新浪微博</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a class="text-muted" href="javascript:;">同性戒指</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a class="text-muted" href="javascript:;">IDLOVES资讯中心</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a class="text-muted" href="javascript:;">LES情侣对戒</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a class="text-muted" href="javascript:;">同性恋珠宝 </a>
                    </li>
                    <li class="breadcrumb-item">
                        <a class="text-muted" href="javascript:;">同性爱情对戒</a>
                    </li>
                </ul>
            </div>
            <div id="footer3" class="mt-2">
                <ul class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a class="text-muted" href="javascript:;">鉴定机构</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a class="text-muted" href="javascript:;">购买支付</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a class="text-muted" href="javascript:;">收货指南</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a class="text-muted" href="javascript:;">售后服务</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a class="text-muted" href="javascript:;">会员中心</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a class="text-muted" href="javascript:;">关于我们</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a class="text-muted" href="javascript:;">联系我们</a>
                    </li>
                    <li class="breadcrumb-item">
                        <img src="http://127.0.0.1:3000/button_121.jpg" alt=""/>
                        <a class="text-muted" href="javascript:;">申请合作</a>
                    </li>
                </ul>
            </div>
            <div>
                <p class="text-muted text-center mt-4">同志专属浪漫爱情信物/中国第一且唯一同志戒指品牌/每一枚IDLOVES求婚钻戒均需实名制</p>
                <a class="text-muted text-center mt-4 d-block" href="javascript:;">Copyright 2006-2016 www.idloves.com All Rights Reserved 粤ICP备15059450号</a>
                <p class="text-muted text-center mt-4">中国互联网违法信息举报中心 | 中国公安网络110报警服务 | 本网站接受中国珠宝玉石首饰行业协会的监督</p>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    
}
</script>
<style scoped>
.footer li a:hover{
    text-decoration: none;
    color: #ffba00 !important;
}
/*footer六图标背景色*/
#myfooter{
    height:182px;width: 100%;
    background: #22abcc;
}
/*footer六图标*/
.footer{
    width:1105px;height:182px;
    margin:0 auto;
    padding-top:35px;
}
/*footer1布局效果*/
.footer1{
    width:100%;
}
.footer1 .footer1_1{
    width:1105px;
    margin:0 auto;
}
/*footer1文字效果*/
.footer1_1 ul li a{
    font-size:14px;
    color:#999;
}
/*footer2布局效果*/
#footer2{
    width:100%;
    background: #f6f6f6;
    border:1px solid #ddd;
}
#footer2 .breadcrumb{
    width: 1105px;
    margin:0 auto;
    border-radius: 0px;
    background: transparent;
}
/* 替换间隔符 */
.breadcrumb-item + .breadcrumb-item::before{
    content: "|";
    padding:1px;
}
.footer2 ul li a{
    font-size: 12.5px;
    color: #999;
}
/* footer3布局效果 */
#footer3{
    width:100%;
}
#footer3 .breadcrumb{
    width:650px;
    margin:0 auto;
    background: transparent;
 }
</style>


